<template>
<div id="main-body">
<div id="main-content">
<transition enter-active-class="animated fadeIn">
<router-view @changeis="change()"></router-view>
</transition>

</div>
<main-foot v-show="is"></main-foot>
</div>

</template>

<script>
import MainFoot from '@/components/footer'
export default {
  components:{
    MainFoot
  },
  data(){
    return{
      is:true
    }
  },
  methods:{
    change(){
      this.is=false
    }
  },
  watch:{
    $route:{
      handler(val){
      if(val.meta.hasFoot){
        this.is=true
      }else{
        this.is=false
      }
      },
      immediate:true,
      deep:true
    }
  }
  
}
</script>

<style lang="scss" scoped>

#main-body{
    display:flex;
    flex-direction: column;
    height:100%;
}
#main-content{
   flex:1;
   overflow: auto;
}
</style>
